/**
贪吃蛇类
@author 默识
@param {int} speed 贪吃蛇速度,毫秒
@param {int} x 地图x轴分为多少单位
@param {int} y 地图y轴分为多少单位
@returns {Snake} none
*/
function Snake(speed, x, y) {
//贪吃蛇运动速度
this.speed = speed;
//贪吃蛇每节身体和食物的宽高
this.width = window.innerWidth / x;
this.height = window.innerHeight / y;
//地图xy轴分为多少单位
this.x = x;
this.y = y;
//初始化贪吃蛇属性
this.sBody = [
[0, 1, 'green'],
[1, 1, 'green'],
[2, 1, 'green'],
[3, 1, 'red']
];
//蛇移动方向
this.sDirection = 'right';
//食物和食物的坐标
this.food = null;
this.foodX = 0;
this.foodY = 0;
}
/**
游戏开始
@returns {undefined} none
*/
Snake.prototype.start = function () {
this.createMap();//创建地图
this.createFood();//初始化食物
this.createSnake();//初始化贪吃蛇
this.bind();//绑定键盘方向更改贪吃蛇方向
//移动贪吃蛇
setInterval(function () {
snake.moveSnake();
}, this.speed);
};
/**
创建贪吃蛇地图
@returns {undefined}none
*/
Snake.prototype.createMap = function () {
document.body.style.backgroundColor = 'black';
};
/**
创建贪吃蛇食物
@returns {undefined}none
*/
Snake.prototype.createFood = function () {
//创建食物
var food = document.createElement('div');
this.food = food;
this.foodX = Math.floor(Math.random() * this.x);
this.foodY = Math.floor(Math.random() * this.y);
//食物的样式
with (food.style) {
position = "absolute";
width = this.width + 'px';
height = this.height + "px";
backgroundColor = 'green';
left = this.foodX * this.width + "px";//食物随机X轴坐标
top = this.foodY * this.height + "px";//食物随机Y轴坐标
}
//食物添加到地图上
document.body.appendChild(food);
};
/**
创建贪吃蛇
@returns {undefined}none
*/
Snake.prototype.createSnake = function () {
//绘制蛇
for (var i = 0; i < this.sBody.length; i++) {
this.sBody[i][3] = this.sBody[i][3] || document.createElement("div");
//设置蛇的样式
with (this.sBody[i][3].style) {
position = "absolute";
width = this.width + 'px';
height = this.height + "px";
left = this.sBody[i][0] * this.width + "px";
top = this.sBody[i][1] * this.height + "px";
backgroundColor = this.sBody[i][2];
}
//放入地图中
document.body.appendChild(this.sBody[i][3]);
}
};
/**
绑定方向事件更改贪吃蛇运动方向
@returns {undefined}none
*/
Snake.prototype.bind = function () {
var tmp = this;
document.onkeyup = function (e) {
var e = window.event || e;
switch (e.keyCode) {
case 37:
tmp.sDirection = 'left';
break;
case 38:
tmp.sDirection = 'up';
break;
case 39:
tmp.sDirection = 'right';
break;
case 40:
tmp.sDirection = 'down';
break;
}
}
};
/**
贪吃蛇行动
@returns {undefined}none
*/
Snake.prototype.moveSnake = function () {
//舍身跟随前一节运动,即改变坐标,注意蛇身先走,要不蛇头紧随的一段身体会跟蛇头重叠
for (var i = 0; i < this.sBody.length - 1; i++) {
this.sBody[i][0] = this.sBody[i + 1][0];
this.sBody[i][1] = this.sBody[i + 1][1];
}
//蛇运动根据方向改变xy轴坐标
switch (this.sDirection) {
case 'up':
this.sBody[this.sBody.length - 1][1]--;
break;
case 'right':
this.sBody[this.sBody.length - 1][0]++;
break;
case 'down':
this.sBody[this.sBody.length - 1][1]++;
break;
case 'left':
this.sBody[this.sBody.length - 1][0]--;
break
}
//贪吃蛇吃食物
if (this.sBody[this.sBody.length - 1][0] === this.foodX
&& this.sBody[this.sBody.length - 1][1] === this.foodY
) {
//创建一节身体
var node = [this.sBody[0][0], this.sBody[0][1], 'green'];
//身体生长
this.sBody.unshift(node);
//食物位置重置
this.foodX = Math.floor(Math.random() * this.x);
this.foodY = Math.floor(Math.random() * this.y);
with (this.food.style) {
left = this.foodX * this.width + "px";//食物随机X轴坐标
top = this.foodY * this.height + "px";//食物随机Y轴坐标
}
}
//判断游蛇是否碰到边界
if (this.sBody[this.sBody.length - 1][0] < 0
|| this.sBody[this.sBody.length - 1][0] >= this.x
|| this.sBody[this.sBody.length - 1][1] < 0
|| this.sBody[this.sBody.length - 1][1] >= this.y
) {
this.gameover();
return;
}
//显示新贪吃蛇位置
this.createSnake();
};
/**
游戏结束
@returns {undefined} none
*/
Snake.prototype.gameover = function () {
alert("GAME OVER!");
location.reload();
};
var snake = new Snake(100, 60, 40);
snake.start();
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。